<template>
	<view class="content" :style="{}">
		<view :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }">
		</view>
		<!-- 头部 -->
		<view class="head" :style="{
        top: statusBarHeight + 'px',
        background: 'white',
      }">
			<view class="head_left">
				<u-icon name="arrow-left" color="#444444" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class="text">图书详情</view>
			<!-- <view class="head_right" v-if="type == 1">
				<view class="jia">
					<image src="@/static/images/slices/icon_wddc_tianjia.png" mode=""></image>
				</view>
				<collect></collect>
			</view> -->
			<view class="head_right">
				<collect :renwuCollect="true" flag="zhuan"></collect>
				<view class="jia" @click="jia">
					<image src="@/static/images/slices/icon_wddc_tianjia.png" mode=""></image>
				</view>
			</view>

			<!-- <view class="head_right" @click="goPage(detail)"> 创建星球 </view> -->
		</view>
		<u-action-sheet :actions="listJia" :show="createShow" @close="colse2" @select="createJia"
			:cancelText="'取消'"></u-action-sheet>
		<!-- 顶部介绍 -->
		<view class="box" :style="{ marginTop: statusBarHeight + height + 'px' }">
			<view class="top">
				<view class="top_text">
					<view class="top_text_title">{{ detail.name }}</view>
					<view class="top_text_name">{{ detail.author }}</view>
					<view class="top_text_text" v-html="detail.abstract">
						<!-- {{ detail.abstract }} -->
					</view>
				</view>
				<view class="top_img" v-if="detail.img">
					<image :src="detail.img.external_url" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 简介 -->
		<view class="blurb">
			<view class="blurb_title">图书简介</view>
			<view class="blurb_text" v-html="detail.introduce">
				<!-- {{ detail.introduce }} -->
			</view>
			<template v-if="detail.kecheng && detail.kecheng.length">
				<view class="detailed" v-for="(item, index) in detail.kecheng" :key="index" @click="toGuan(item)">
					<view class="detailed_top">
						<view class="detailed_top_left">
							{{ item.name }}
						</view>
						<view class="detailed_top_right">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<view class="comment_top">
				<view class="ping" @click="showLimits = true">
					评论({{ detail.comment_count }})
				</view>
				<view class="zan"> 赞 {{ detail.like_count }} </view>
			</view>
			<!-- <view class="comment_item">
        <view class="comment_item_top">
          <view class="comment_item_top_img">
            <image
              src="/static/images/pic_yt_xingzhegushi_one.png"
              mode=""
            ></image>
          </view>
          <view class="comment_item_top_text">
            <view class="comment_item_top_text_name">邬东东</view>
            <view class="comment_item_top_text_str"
              >评论评论评论评论评论评论评论评论评论</view
            >
            <view class="comment_item_top_text_other">
              <view class="other_time">1小时前 回复</view>
              <view class="other_num">
                <u-icon name="thumb-up"></u-icon>
                4779
              </view>
            </view>
          </view>
        </view>
      </view> -->
			<view style="width: 100%; padding: 0 30rpx; box-sizing: border-box">
				<reviewContent ref="review" :reply="reply" :reply_one="reply" v-for="(item, index) in list"
					:value="item" :index="index" :id="id" :my_level_id="my_level_id" @reply="handReply"
					@replyC="handReply1" @refresh="refresh">
				</reviewContent>
			</view>

			<view class="empty_view" v-if="list && list.length == 0">
				<image class="item_left_clickable" src="@/static/images/my/kong.png" mode=""></image>
				<view>当前暂无评论~</view>
			</view>
		</view>

		<!-- 底部留底 -->
		<!-- <view class="bot_none"></view> -->
		<!-- 底部按钮 -->
		<view class="" style="width: 100%; height: 112rpx"> </view>
		<view class="btn_box" v-show="!flag && !showMode">
			<view class="btn_box_left">
				<view class="btn_box_left_item" @click="collectFn">
					<view>
						<u-icon name="star" class="btn_box_left_item_icon" size="20" v-if="!detail.is_collect"></u-icon>
						<u-icon name="star" class="btn_box_left_item_icon" size="20" color="#55b877" v-else></u-icon>
					</view>
					<view>收藏</view>
				</view>
				<view class="btn_box_left_item" @click="handShow()">
					<image src="@/static/weichuang/icon_fld_pinglun.png" mode="" class="icon_img"></image>
					<view>评论</view>
				</view>
			</view>
			<view class="btn_box_right" @click="toastFn"> 前去获取 </view>
		</view>
		<!-- 评论框 -->
		<!-- 评论框 -->
		<!-- <view class="" style="position: absolute;width: 100%;background: #fff;" :style="{
		bottom:pupHeight+'px'
	}" v-show="showMode">
		<view class="mod_view">
		  <view class="mod_view_input">
		    <u--input
			  :focus="focusKuwei"
		      :placeholder="plsText"
		      border="none"
		      v-model="value"
		      @change="change"
		      shape="circle"
			@focus="focus" 
			@blur="blur"
		    ></u--input>
		  </view>
		  <view class="mod_view_btn" @click="send">发送</view>
		</view>
		<view class="mod_icon">
		  <u-icon
		    name="../../static/images/icon_cjtl_shangchuantupianhuoshipin.png"
		    size="25"
		    class="mod_icon_item"
		  ></u-icon>
		  <u-icon
		    name="../../static/images/icon_cjtl_shangchuanyinpin.png"
		    size="25"
		    class="mod_icon_item"
		  ></u-icon>
		  <u-icon
		    name="../../static/images/icon_cjtl_shangchuantupianhuoshipin.png"
		    size="25"
		    class="mod_icon_item"
		  ></u-icon>
		</view>
	</view> -->
		<template>
			<u-popup :show="showMode" mode="bottom" @close="close" @open="open" :customStyle="{
          bottom: 0,
        }">
				<view>
					<!-- 评论框 -->
					<view class="mod_view">
						<view class="mod_view_input">
							<u--input :focus="focusKuwei" :placeholder="plsText" border="none" v-model="value"
								@change="change" shape="circle" @focus="focus" @blur="blur"></u--input>
						</view>
						<view class="mod_view_btn" @click="send">发送</view>
					</view>
					<!-- 录音 -->
					<view class="mod_sound" v-show="showSound">
						<view class="mod_sound_background">
							<!-- <progressBar :way="1" color="#444444"></progressBar> -->
						</view>
					</view>
					<view class="mod_img" v-if="fileType == 2">
						<image :src="item.preview_url" v-for="(item, index) in plImage"></image>
						<!-- <image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image>
						<image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image>
						<image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image> -->
					</view>
					<view style="
              width: 100%;
              padding: 0 50rpx 0 30rpx;
              box-sizing: border-box;
            " v-if="fileType == 1">
						<com-audio :showDelBtn="true" :src="plImage[0].preview_url"></com-audio>
						<!-- <progressBar :way="1" color="#444444" :src="plImage[0].preview_url"></progressBar> -->

						<!-- <progressBar :showDelBtn="true" :way="1" color="#444444" :src="'https://image.yitian369.net/10001/20240112/15df70365d9d67628eee48c41bb941ec.mp3'"></progressBar> -->
					</view>
					<!-- icon -->
					<view class="mod_icon">
						<view class="check_image" @click="current_icon = 0">
							<image src="@/static/images/icon_tlzxq_jianpan.png" mode=""></image>
						</view>
						<view class="check_image" @click="current_icon = 1">
							<image src="@/static/images/icon_tlzxq_yuyin.png" mode=""></image>
						</view>
						<view class="check_image" @click="uploadFile">
							<image src="@/static/images/icon_tlzxq_tupian.png" mode=""></image>
						</view>
						<!-- <image src="@/static/images/icon_tlzxq_yuyin.png" mode=""></image>
			<image src="@/static/images/icon_tlzxq_tupian.png" mode=""></image> -->
					</view>
					<!-- 录制按钮 -->
					<!-- v-if="showBtn" -->
					<view class="mod_sound_btn" v-if="current_icon == 1">
						<view class="btn_view" @touchstart="touchstart" @touchend="touchend">
							<text class="btn_view_time" v-show="!isTranscribe">00.000</text>
							<u-count-to v-show="isTranscribe" :autoplay="autoplay" ref="uCountTo" :startVal="0"
								:endVal="60" :decimals="3" :duration="60000" :useEasing="false" fontSize="48rpx"
								color="#fff"></u-count-to>
							<!-- <view class="btn_view_time">{{ time }}</view> -->
							<view class="btn_view_text">{{ start }}</view>
						</view>
					</view>
				</view>
			</u-popup>
		</template>
		<!-- 更多评论框 -->

		<template>
			<u-popup :show="showLimits" @close="commentClose" @open="commentOpen" :closeable="true">
				<view class="pop_view">
					<view class="pop_title"> 更多评论 </view>
					<scroll-view class="pop_prompt">
						<view class="pop_prompt_item">
							<view class="pop_prompt_item_img">
								<image src="@/static/images/pic_yt_xingzhegushi_one.png"></image>
							</view>
							<view class="pop_prompt_item_right">
								<view class="item_right_name">
									<text>郝甜</text>
									<text class="reply" v-if="showReply">回复</text>
									<text class="reply" v-if="showReply">邬东东</text>
								</view>
								<view class="item_right_text">评论评论评论评论评论评论评论评论评论</view>
								<view class="item_right_img" v-if="promptImg">
									<image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image>
									<image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image>
									<image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image>
								</view>
								<view class="item_right_sound" v-if="promptSound">
									<progressBar :way="1" color="#444444"></progressBar>
								</view>
								<view class="item_right_time">1小时前 回复</view>
								<view class="item_right_more">
									展开更多
									<u-icon name="arrow-down" size="15"></u-icon>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>


			<u-popup mode="center" :show="show1" @close="close1" @open="open1">
				<view class="pop_live">
					<view class="pop_live_title">
						请选择查看需要的行者权限
					</view>
					<u-radio-group v-model="live" activeColor="rgb(85, 184, 119)" iconPlacement="right">
						<view class="pop_live_box">
							<view class="pop_live_item" style="display: flex;align-items: center;"
								@click="handLive(item.level_id)" v-for="(item,index) in liveList" :key="item.level_id">
								<!-- 元气驿站 -->
								{{item.level_name}}
								<u-radio :name="item.level_id"></u-radio>
							</view>
							<!-- <view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(2)">
	  					启初梦谷
	  					<u-radio :name="2"></u-radio>
	  				</view>
	  				<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(3)">
	  					青空天台
	  					<u-radio :name="3"></u-radio>
	  				</view>
	  				<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(4)">
	  					无极云顶
	  					<u-radio :name="4"></u-radio>
	  				</view>
	  				<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(5)">
	  					返朴归源
	  					<u-radio :name="5"></u-radio>
	  				</view> -->

							<view class="pop_live_btn">
								<view class="live_btn" @click="liveColse">
									取消
								</view>
								<view class="live_btn" style="background: rgb(85, 184, 119);color: #fff;"
									@click="liveSubmit">
									确定
								</view>
							</view>
						</view>

					</u-radio-group>
				</view>
			</u-popup>



		</template>
		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import collect from "@/components/collect.vue"; // 收藏、
	import progressBar from "@/pages/components/progress_bar.vue"; //录音
	import reviewContent from "@/pages/book/reviewContent.vue"; //评论
	import getRecorderManager from "@/common/getRecorderManager.js";
	import comAudio from "@/pages/components/audio.vue"; //语音条
	import {
		getCommentList,
		pinglun
	} from "@/common/api/tushu.js";
	import config from "@/config"; // 配置文件
	import storage from "@/common/storage.js"; // 缓存封装
	export default {
		components: {
			collect,
			progressBar,
			reviewContent,
			comAudio,
		},
		data() {
			return {
				title: "",
				statusBarHeight: 0,
				height: 0,
				showMode: false,
				flag: false,
				value: "",
				showSound: false,
				start: "点击录制",
				end: "完成录制",
				time: "00：100",
				showBtn: false,
				showLimits: false, // 更多评论弹出层显示关闭
				showReply: false, // 回复文字显示关闭
				promptSound: false, // 录音显示关闭
				promptImg: false, // 图片显示关闭
				type: 2,
				detail: {},
				id: "",
				reply: true,
				list: [],
				plsText: "写回复",
				focusKuwei: false,
				toUserId: 0,
				replyId: 0,
				is_c: false,
				currentIndex: -1,
				pupHeight: 0,
				tuHeight: 0,
				current_icon: 0,
				plImage: [],
				isTranscribe: false,
				autoplay: false,
				fileType: 0, // 1音频  2视频
				createShow: false,
				listJia: [{
						name: "创建星球",
					},
					{
						name: "创建微创",
					},
				],
				total: 0,
				page: 1,
				my_level_id: 0,
				show1: false,
				live: 0,
				liveList: []
			};
		},
		onLoad(options) {
			this.id = options.id;

			if (options && options.type) {
				this.type = options.type;
			}
			// setTimeout(() => {
			// 	this.showMode = false;
			// 	this.focusKuwei = false;
			// },800)
			this.getComment();
			uni.onKeyboardInput(function(e) {
				// 判断是否弹出软键盘
				if (e.height > uni.upx2px(100)) {
					// 弹出软键盘时，将页面内容滚动到底部
					uni.pageScroll(false, function() {
						uni.pageScroll(true, function() {
							uni.pageScroll(false, function() {
								uni.pageScroll(true, function() {
									console.log("页面已滚动到底部");
								});
							});
						});
					});
				}
			});

			uni.onKeyboardHeightChange((res) => {
				console.log("键盘高度变化111", res.height);
				if (this.tuHeight) {
					this.tuHeight = res.height;
				}
				this.pupHeight = res.height;
				uni.pageScroll(false, function() {
					uni.pageScroll(true, function() {
						uni.pageScroll(false, function() {
							uni.pageScroll(true, function() {
								console.log("页面已滚动到底部");
							});
						});
					});
				});
			});
		},
		onReachBottom() {
			console.log("totaltotal", this.total, this.list.length);
			if (this.total > this.list.length) {
				this.page += 1;
				this.getComment();
			}
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".head")
					.boundingClientRect((data) => {
						this.height = data.height;
					})
					.exec();
			});
			this.getDetail();
		},
		methods: {
			open1() {

			},
			close1() {
				this.show1 = false;
			},
			// 跳转关联
			toGuan(item) {
				if (item) {
					uni.navigateTo({
						url: "/pages/training/detail?type=1&id=" + item.id
					})
				}
			},
			toastFn() {
				uni.$u.toast("暂未开放");
			},
			getComment() {
				getCommentList({
					id: this.id,
					page: this.page,
				}).then((res) => {
					console.log("ressssss", res);
					this.my_level_id = res.data.my_level_id;
					this.list.push(...res.data.list.data);
					this.total = res.data.list.total;
				});
			},
			// 获取图书详情
			getDetail() {
				this.$http
					.tushuDetail({
						id: this.id,
					})
					.then((res) => {
						this.detail = res.data.detail;
						this.toUserId = res.data.detail.user_id;
						// this.xiaoyaoList = data;
						console.log(this.detail, "图书详情");
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			uploadFile() {
				let token = storage.get("token");
				let that = this;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.uploadFile({
							url: config.uni_app_web_api_url + "/api/upload/image", // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: "file",
							formData: {
								user: "test",
							},
							header: {
								"Access-Token": token,
							},
							success: (res) => {
								const data = JSON.parse(res.data);
								console.log("resssss", res, data.data.fileInfo);
								that.plImage = [{
									file_id: data.data.fileInfo.file_id,
									preview_url: data.data.fileInfo.preview_url,
								}, ];
								that.fileType = 2;
							},
						});
					},
				});
			},
			touchstart() {
				console.log("2222");
				this.isTranscribe = true;
				getRecorderManager.startManager();
				this.$refs.uCountTo.start();
			},
			async touchend() {
				console.log("33333");
				this.isTranscribe = false;
				let that = this;
				let token = storage.get("token");
				const url = await getRecorderManager.stopManager();
				console.log("222222222", url);
				uni.uploadFile({
					url: config.uni_app_web_api_url + "/api/upload/audio", // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					formData: {
						user: "test",
					},
					header: {
						"Access-Token": token,
					},
					success: (res) => {
						const data = JSON.parse(res.data);

						console.log("resssssssss", data);
						that.plImage = [{
							file_id: data.data.fileInfo.file_id,
							preview_url: data.data.fileInfo.external_url,
						}, ];
						that.fileType = 1;
					},
				});
			},
			handReply(val, index) {
				console.log("vallll", val);
				this.plsText = "回复@ " + val.user.nick_name;
				this.replyId = val.id;
				this.toUserId = val.user.user_id;
				this.focusKuwei = true;
				this.showMode = true;
				this.is_c = true;
				this.currentIndex = index;
			},
			handReply1(val, item, index) {
				console.log("vallll111", val);
				this.plsText = "回复@ " + val.user.nick_name;
				this.replyId = item.id;
				this.toUserId = val.user.user_id;
				this.focusKuwei = true;
				this.showMode = true;
				this.is_c = true;
				this.currentIndex = index;
			},
			refresh() {},
			// 收藏
			collectFn() {
				this.$http
					.tushuCollect({
						id: this.detail.id,
						type: this.detail.is_collect + 1,
					})
					.then((res) => {
						//   this.detail = res.data.detail;
						// this.xiaoyaoList = data;
						console.log(res, "图书收藏");
						this.detail.is_collect = !this.detail.is_collect;
						uni.$u.toast("收藏成功");
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			change() {},
			goPage(detail) {
				uni.navigateTo({
					url: `/pages/distinguish/createStart?type=5`,
				});
			},
			toBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			handShow() {
				this.focusKuwei = true;
				this.showMode = true;
			},
			focus() {},
			blur() {
				setTimeout(() => {
					this.focusKuwei = false;
				}, 0);
				this.plsText = "写回复";
			},
			send() {
				
				
				this.$http.userLevelList({}).then(res => {
					if (res.data.userInfo.is_teacher == 1 || res.data.userInfo.is_senators == 1) {
						this.show1 = true;
						console.log('reessssssliiive',res);
						this.liveList = res.data.list;
						this.liveList.unshift({
							level_name:'公开',
							level_id:0
						})
					} else {
						this.huifu();
					}
				})
				
				
				
			},
			huifu(grade_auth = 0) {
				let file_id = 0;
				if (this.plImage.length) {
					file_id = this.plImage[0].file_id;
				}
				pinglun({
					id: this.id,
					file_id,
					content: this.value,
					comment_id: this.replyId,
					comment_user_id: this.toUserId,
					grade_auth
				}).then((res) => {
					console.log("ressssss", res);
					this.replyId = 0;
					this.toUserId = this.detail.user_id;
					this.value = "";
					this.showMode = false;
					console.log("this.$refs.review", this.$refs.review, this.currentIndex);
					if (this.is_c) {
						this.$refs.review[this.currentIndex].expand();
						this.is_c = false;
					}
					this.list = [];
					this.page = 1;
					this.getComment();
				});
			},
			jia() {
				this.createShow = true;
			},
			open2() {
				this.createShow = true;
			},
			colse2() {
				this.createShow = false;
			},
			createJia(e) {
				console.log("eeeee", e);
				if (e.name == "创建星球") {
					uni.navigateTo({
						url: "/pages/distinguish/createStart?type=5&type_id=" + this.id,
					});
				} else if (e.name == "创建微创") {
					uni.navigateTo({
						url: "/pages/bigResult/minute_create",
					});
				}
			},
			open() {
				console.log("open");
			},
			close() {
				this.showMode = false;
				console.log("close");
			},
			commentClose() {
				this.showLimits = false;
				console.log("close");
			},
			commentOpen() {
				console.log("open");
			},
			handLive(live) {
				this.live = live;
			},
			liveColse() {
				this.show1 = false;
			},
			liveSubmit() {
				this.huifu(this.live);
				this.show1 = false;
			}
		},
	};
</script>

<style scoped lang="scss">
	.content {
		position: relative;
		background: #f7f8fa;
		box-sizing: border-box;
	}

	/deep/.mod_view {
		display: flex;
		align-items: center;
		padding: 16rpx 30rpx;
		box-sizing: border-box;

		.mod_view_input {
			flex: 1;

			.u-input {
				background: #f6f6f6;
				padding: 18rpx 40rpx !important;
			}
		}

		.mod_view_btn {
			width: 80rpx;
			background: #55b877;
			color: #ffffff;
			border-radius: 40rpx;
			padding: 16rpx 54rpx;
			text-align: center;
			margin-left: 16rpx;
		}
	}

	.mod_sound {
		padding: 0 30rpx;

		.mod_sound_background {
			border-radius: 16rpx;
			background: #f7f8fa;
			padding: 32rpx;
		}
	}

	.mod_img {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 16rpx 30rpx;

		image {
			width: 222rpx;
			height: 222rpx;
			margin-bottom: 12rpx;
			margin-right: 12rpx;
		}

		image:nth-child(3n) {
			margin-right: 0;
		}
	}

	.mod_icon {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
		margin-bottom: 38rpx;

		.check_image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 28rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.mod_icon_item {
			margin-right: 32rpx;
		}
	}

	.mod_sound_btn {
		padding: 106rpx 227rpx;

		.btn_view {
			width: 296rpx;
			height: 296rpx;
			background-image: url("../../static/images/pic_cjwc_luzhi.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.btn_view_time {
				color: #ffffff;
				font-size: 46rpx;
			}

			.btn_view_text {
				color: #ffffff;
				font-size: 26rpx;
				margin-top: 4rpx;
			}
		}
	}

	.head {
		width: 100%;
		padding: 18rpx 30rpx 47rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;
		background: #ffffff;

		.head_left {
			position: absolute;
			left: 30rpx;
		}

		.head_right {
			position: absolute;
			right: 30rpx;
			color: #55b877;
			font-size: 30rpx;
			display: flex;
			flex-direction: row-reverse;

			.jia {
				width: 40rpx;
				height: 38rpx;
				margin-left: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #444444;
		}
	}

	.box {
		width: 100%;

		.top {
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 30rpx;

			// box-sizing: border-box;
			.top_text {
				.top_text_title {
					font-size: 32rpx;
					color: #444444;
				}

				.top_text_name {
					font-size: 26rpx;
					color: #888888;
					margin-top: 16rpx;
				}

				.top_text_text {
					font-size: 26rpx;
					color: #444444;
					margin-top: 32rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 3;
					/* 控制显示的行数 */
				}
			}

			.top_img {
				width: 180rpx;
				height: 240rpx;
				margin-left: 42rpx;

				image {
					width: 180rpx;
					height: 240rpx;
				}
			}
		}
	}

	.blurb {
		margin-top: 16rpx;
		background: #ffffff;
		padding: 32rpx 30rpx;

		.blurb_title {
			font-size: 32rpx;
			color: #444444;
		}

		.blurb_text {
			font-size: 28rpx;
			color: #444444;
			margin-top: 24rpx;
		}

		.detailed {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			background: rgb(247, 248, 250);
			margin-top: 40rpx;

			.detailed_top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.detailed_top_left {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #474747;
				}
			}

			.detailed_bottom {
				font-size: 26rpx;
				color: #adadad;
				margin-top: 16rpx;
			}
		}
	}

	.comment {
		margin-top: 16rpx;
		background: #ffffff;

		.comment_top {
			display: flex;
			border-bottom: 1rpx solid #eeeeee;
			justify-content: space-between;
			align-items: center;

			.ping {
				padding: 24rpx 29rpx;
			}

			.zan {
				padding: 24rpx 29rpx;
			}
		}

		.comment_item {
			padding: 32rpx 30rpx;

			.comment_item_top {
				width: 100%;
				display: flex;

				.comment_item_top_img {
					width: 88rpx;

					image {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}
				}

				.comment_item_top_text {
					margin-left: 12rpx;
					flex: 1;
					border-bottom: 1rpx solid #eeeeee;
					padding-bottom: 35rpx;

					.comment_item_top_text_name {
						color: #888888;
						font-size: 24rpx;
					}

					.comment_item_top_text_str {
						color: #444444;
						font-size: 30rpx;
						margin-top: 4rpx;
					}

					.comment_item_top_text_other {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 11rpx;

						.other_time {
							font-size: 24rpx;
							color: #888888;
						}

						.other_num {
							display: flex;
							font-size: 24rpx;
							color: #888888;
						}
					}
				}
			}
		}
	}

	.bot_none {
		height: 200rpx;
		background: #f7f8fa;
	}

	.btn_box {
		width: 100%;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #ffffff;

		.btn_box_left {
			display: flex;
			align-items: center;

			.btn_box_left_item {
				height: 90rpx;
				display: flex;
				align-items: center;
				color: #888888;
				font-size: 28rpx;
				margin-right: 48rpx;

				.btn_box_left_item_icon {
					margin-right: 12rpx;
					position: relative;
					top: 5rpx;
				}

				.btn_box_left_item_icon_yellow {
					color: red;
				}

				.icon_img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
					position: relative;
					top: 5rpx;
				}
			}
		}

		.btn_box_right {
			width: 150rpx;
			padding: 18rpx 65rpx;
			background: #55b877;
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-size: 30rpx;
		}
	}

	/deep/ .pop_view {
		padding: 0 30rpx;
		position: relative;

		.pop_title {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			background: #ffffff;
			display: flex;
			justify-content: center;
			padding: 40rpx 0;
			font-size: 32rpx;
		}

		.pop_prompt {
			margin-top: 90rpx;
			padding: 48rpx 30rpx;

			.pop_prompt_item {
				display: flex;
				padding-right: 30rpx;

				.pop_prompt_item_img {
					width: 88rpx;

					image {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}
				}

				.pop_prompt_item_right {
					flex: 1;
					margin-left: 12rpx;
					border-bottom: 1rpx solid #eeeeee;

					.item_right_name {
						font-size: 24rpx;
						color: #888888;

						.reply {
							margin-left: 8rpx;
						}
					}

					.item_right_text {
						margin-top: 15rpx;
						color: #444444;
						font-size: 30rpx;
					}

					.item_right_img {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						margin-top: 16rpx;

						image {
							width: 222rpx;
							height: 222rpx;
							margin-right: 12rpx;
							margin-bottom: 12rpx;
						}
					}

					.item_right_sound {
						background: #f7f8fa;
						border-radius: 16rpx;
						padding: 32rpx;
						margin-top: 16rpx;
					}

					.item_right_time {
						font-size: 24rpx;
						color: #888888;
						margin-top: 11rpx;
					}

					.item_right_more {
						color: #888888;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						margin: 30rpx 0;
					}
				}
			}
		}
	}

	.show {
		width: 40rpx;
		height: 38rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.empty_view {
		margin-top: 100rpx;
		padding-bottom: 100rpx;

		image {
			margin: 0 auto;
			width: 410rpx;
			height: 410rpx;
		}

		view {
			font-size: 30rpx;
			color: #d8d8d8;
			text-align: center;
		}
	}
	.pop_live {
		width: 570rpx;
		// height: 820rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #fff;
		.pop_live_title {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 30rpx;
			box-sizing: border-box;
		}
		.pop_live_box {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;
			.pop_live_item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;
				padding: 30rpx 0;
				box-sizing: border-box;
			}
		}
		.pop_live_btn {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
			margin-bottom: 28rpx;
			.live_btn {
				width: 46%;
				height: 80rpx;
				border-radius: 24rpx;
				border: 1rpx solid #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>